<template>
  <div class="testResult">
    <div class="testList-title">{{testName}}（{{grade}}分）</div>
  	<el-row type="flex" class="row-bg" justify="space-around">
  		<el-col :sm="22" :md="18" :lg="18"  :xs="22">
  			<div class="grid-content bg-purple-light testList-wrap">
    			<div class="testList-content">
    				<ul v-if='subjectList.radioWrap.length>0'>
    					<h3>一、单选题</h3>
    					<li v-for="(v,i) in subjectList.radioWrap">
    						<p>{{i+1}}、{{v.question}}</p>
    						<div class="cell" >
    							<span v-for="v1 in v.option">{{v1}}</span>
    							<p>
    								<span class="myItem">参考答案：{{v.answer}}</span>
    								<span class="myItem1">考生答案：{{v.eAnswer}}</span>
    								<i v-if="v.answer==v.eAnswer" class="el-icon-check"></i>
    								<i v-if="v.answer!=v.eAnswer" class="el-icon-close"></i>
    							</p>
    						</div>
    					</li>
    				</ul>
    				<ul v-if='subjectList.checkboxWrap.length>0'>
    					<h3>二、多选题</h3>
    					<li v-for="(v,i) in subjectList.checkboxWrap">
    						<p>{{i+1}}、{{v.question}}</p>
    						<div class="cell" >
    							<span v-for="v1 in v.option">{{v1}}</span>
    							<p>
    								<span class="myItem">参考答案：{{v.answer}}</span>
    								<span class="myItem1">考生答案：{{v.eAnswer}}</span>
    								<i v-if="v.answer==v.eAnswer" class="el-icon-check"></i>
    								<i v-if="v.answer!=v.eAnswer" class="el-icon-close"></i>
    							</p>
    						</div>
    					</li>
    				</ul>
    				<ul v-if='subjectList.judgeWrap.length>0'>
    					<h3>三、判断题</h3>
    					<li v-for="(v,i) in subjectList.judgeWrap">
    						<p>{{i+1}}、{{v.question}}</p>
    						<div class="cell" >
    							<p>
    								<span class="myItem">参考答案：{{v.answer=='A'?'对':'错'}}</span>
    								<span class="myItem1">考生答案：{{v.eAnswer=='A'?'对':(v.eAnswer=='B'?'错':'')}}</span>
    								<i v-if="v.answer==v.eAnswer" class="el-icon-check"></i>
    								<i v-if="v.answer!=v.eAnswer" class="el-icon-close"></i>
    							</p>
    						</div>
    					</li>
    				</ul>
    			</div>
    			<el-button type="primary" @click="goBack">&nbsp;&nbsp;&nbsp;返回&nbsp;&nbsp;&nbsp;</el-button>
  			</div>
  		</el-col>
  	</el-row>
  </div>
</template>

<script>
export default {
  name: 'testResult',
  data () {
    return {
    	//试卷总分
    	grade:'',
    	//正常考试的
    	testId:'',
    	//缺考的
    	testId2:'',
      subjectWrap:[],
      testName:"",
      //题目列表
      subjectList:{
      	radioWrap:[],
      	checkboxWrap:[],
      	judgeWrap:[]
      },
    }
  },
  created:function(){
  	//获取成绩记录ID
  	this.testId=this.$route.query.academicRecordsId;
  	//缺考的
  	this.testId2=this.$route.query.testPaperId;
		var that=this;
  	if(this.testId!=null){
			this.axios({
				method:'get',
				url:that.$store.state.globalTestApi+"/admin/AcademicRecords/getDetail?id="+this.testId,
				data:{}
			}).then(function(res){
				if(res.data.msg=="操作成功"){
					//试卷名字
					that.testName=res.data.data.academicRecords.testPaperName	
					//试卷总分
					that.grade=res.data.data.academicRecords.grade
					that.subjectWrap=JSON.parse(res.data.data.academicRecords.testPaperDetail	)
					that.mytestContent()
				}
			})
		}else{
			this.axios({
				method:'get',
				url:that.$store.state.globalTestApi+"//admin/TestPaper/getDetail?id="+this.testId2,
				data:{}
			}).then(function(res){
				if(res.data.msg=="操作成功"){
					//试卷名字
					that.testName=res.data.data.testPaper.name
					//试卷总分
					that.grade=0
					that.subjectWrap=JSON.parse(res.data.data.testPaper.allSubject)
					that.mytestContent()
				}
			})
		}
  },
  methods:{
  	//返回
  	goBack(){
  		this.$router.push({
	    	name:"myTest",
	    })
  	},
  	//返回数据的函数
  	mytestContent(){
  		var that=this;
  		that.subjectWrap.forEach(function(data2){
				//单选
				if(data2.type=="1"){
					that.subjectList.radioWrap=data2.list;
					that.subjectList.radioWrap.forEach(function(data3,i){
						that.subjectList.radioWrap[i].option=data3.option.split(';')
					})
				}
				//多选
				if(data2.type=="2"){
					that.subjectList.checkboxWrap=data2.list;
					that.subjectList.checkboxWrap.forEach(function(data3,i){
						that.subjectList.checkboxWrap[i].option=data3.option.split(';')
					})
				}
				//判断
				if(data2.type=="3"){
					that.subjectList.judgeWrap=data2.list;
					that.subjectList.judgeWrap.forEach(function(data3,i){
						that.subjectList.judgeWrap[i].option=data3.option.split(';')
					})
				}
			})
  	}
  }
}
</script>

<style scoped>
.testResult .testList-title{padding-top: 80px;font-size: 32.59px;color: #fff;margin-bottom: 30px}
.testResult .testList-wrap{padding:20px;background-color: #fff;box-shadow: 0px 0px 3px rgba(0,0,0,0.3);box-sizing: border-box;margin-bottom: 116px;}
.testResult .remind{text-align: left;font-size: 14px;overflow: hidden;line-height: 30px;}
.testResult .remind span{color: #386ce3;}
.testResult .remind p{float: right;}
.testResult .remind-content{color: #bb1515;font-size: 14px;}
.testResult .testList-content h3{font-size: 18px;font-weight: normal;}
.testResult .testList-content{padding:10px 10% 50px 10%;box-sizing: border-box;text-align: left;}
.testResult .testList-content li{position: relative;}
.testResult .cell{margin:0 20px;}
.testResult .cell span{margin-right: 10%; display: inline-block;}
.testResult .cell .myItem{color: #f00;}
.testResult .cell .myItem1{color: #386ce3;}
.testResult .cell i{color: #f00;font-size: 30px;position: absolute;right:0px;bottom:30%;}
.testResult .testList-wrap li{margin-bottom:20px;}
.testResult .testList-wrap li p{margin-bottom: 20px;margin-top: 10px;}
.testResult .testList-content .el-form-item{margin-top: 80px;text-align: center;}
@media screen and (max-width: 768px) {
	.testResult .testList-title{font-size: 20px;padding-top:50px;}
	.testResult .remind{font-size: 12px;line-height: 24px;}
	.testResult .remind span{display: block;}
	.testResult .remind-content{font-size: 12px;}
	.testResult .testList-content{padding:10px 0 20px 0;}
	.testResult .testList-content h3{font-size: 16px;}
	.testResult .testList-wrap li{margin-bottom:20px;font-size: 12px;}
	.testResult .testList-wrap li p{margin-bottom: 10px;margin-top: 5px;}
	.testResult .cell{margin:2px 10px;width: 100%;}
	.testResult .cell i{font-size: 24px;}
}
</style>
